<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">

    //入口函数，页面加载后执行函数 jQuery实现
        $(function () {
            //获取列表数据
            list();
            $("#editFrom").hide();
            //加载部门列表
            depts();

        })
    
        function depts() {
            //调用部门数据接口，动态加载到下拉框
            $.get("dept/list",{},function (depts) {
                console.log(depts);
                $.each(depts,function (i,e) {
                    //$("#depts").append("<option value=\""+e.deptno+"\">"+e.dname+" </option>")
                    //  ``反引号 不存在拼接
                    $("#depts").append(`<option value="${e.deptno}">${e.dname} </option>`);
                });
            },"json")

        }

        //封装list函数
        // var enameS="";
        var page={"enameS":"","pageNum":1,"size":2,"pageCount":0};
        function list(){
            //发送请求  获取列表数据  url-传参-回调函数—数据类型
            $.get("emp/list",page,function(data){
                    console.log(page.enameS);
                    console.log(data.records);
                    console.log(data.total);
                    console.log(data.pages);
                    console.log(data.pageNum);
                    $("#pageNum").html(data.current);
                    $("#rowCount").html(data.total);
                    $("#pageCount").html(data.pages);
                    page.pageCount=data.pages;


                    //加载之前 清空表格内容
                    // $("#list").empty();
                    $("#list").html("");
                    $("#list").append("<tr>\n" +
                        "            <td>编号</td>\n" +
                        "            <td>姓名</td>\n" +
                        "            <td>部门名称</td>\n" +
                        "            <td>操作</td>\n" +
                        "        </tr>");
                    //循环遍历集合，实现动态加载数据到表格 $("#list")
                    $.each(data.records,function (i,e) {
                        var dname = e.dname==null?"":e.dname;
                        $("#list").append("<tr>\n" +
                            "            <td>"+e.empno+"</td>\n" +
                            "            <td>"+e.ename+"</td>\n" +
                            "            <td>"+dname+"</td>\n" +
                            // "            <td>"+e.dept!=null?e.dept.dname:'没有部门'+"</td>\n" +
                            "            <td><a href='#' onclick='editShow("+e.empno+")'>修改</a>&nbsp;&nbsp;&nbsp;" +
                            "             <a href='#' onclick='del("+e.empno+")'>删除</a>  </td>\n" +
                            "        </tr>")
                    })
            },"json")

        }
    function del(empno){
        console.log(empno);
        //删除ajax请求
        if (confirm("确定删除")){
            //"cmd"-业务
            $.get("emp/del",{"empno":empno},function(result){
                //alert("删除成功");
                console.log(result);
                // location.href="emp?cmd=list";//浏览器地址改变，页面刷新
                //更新列表数据
                list();
            },"json")
        }
    }

    var modify=0;
    function addShow() {
        modify=0;
        $("#editFrom").show();
        // $("#ename").val("");
        $(":text").val("");
    }

    function edit() {
        //员工的新增或者修改
        console.log(123);
        var empno = $("#empno").val();
        var ename = $("#ename").val();
        var deptno = $("#depts").val();
        $.post("emp/edit",{"empno":empno,"ename":ename,"deptno":deptno,"modify":modify},function(result){
            alert("添加成功！");
            console.log(result);
            list();
        },"json");
        $("#editFrom").hide();
    }

    function editShow(empno) {
        modify=1;
        //显示表单
        $("#editFrom").show();
        //ajax通过编号获取数据，完成回显
        console.log(empno);
        $.get("emp/getByEmpno",{"empno":empno},function (result) {
            console.log(result.ename);
            $("#empno").val(result.empno);
            $("#ename").val(result.ename);
            $("#depts").val(result.deptno);
        },"json");

    }

    function search() {
        page.enameS=$("#enameS").val();
        console.log(page.enameS);
        list();
    }

    function pageFirst() {
        page.pageNum=1;
        list();
    }

    function pagePrev() {
        page.pageNum--;
        list();
    }

    function pageNext() {
        page.pageNum=page.pageNum+1;
        list();
    }

    function pageLast() {
        page.pageNum=page.pageCount;
        list();
    }
    </script>
</head>
<body>
    <h1>员工列表管理ajax版</h1>
    <a href="#" onclick="addShow()">新增员工</a>
    <a href="user/logout">用户注销</a>

    用户名：<input type="text" id="enameS">
    <button onclick="search()">搜索</button>
<!--    编号 姓名 操作-->
    <table id="list" width="600px" border="1px">
<!--        <tr>-->
<!--            <td>编号</td>-->
<!--            <td>姓名</td>-->
<!--            <td>操作</td>-->
<!--        </tr>-->
    </table>
    <br>
    <a href="#" onclick="pageFirst()">首页</a>
    <a href="#" onclick="pagePrev()">上一页</a>
    <a href="#" onclick="pageNext()">下一页</a>
    <a href="#" onclick="pageLast()">最后一页</a>
    共 <span id="rowCount"></span>条记录  <span id="pageNum"></span> / <span id="pageCount"></span> 页


<!--    css style="display: none"-->
    <div id="editFrom">
        <h3>员工编辑页</h3>
        <form>
            编号：<input type="text" id="empno" ><br/>
            姓名：<input type="text" id="ename" name="ename"  size="20"><br>
            部门：<select id="depts"><br>
                    <!--<option value="3">3组</option>-->

                </select>
            <input type="button" onclick="edit()" value="提交">
        </form>
    </div>

</body>
</html>